<%@page import="com.mmy.domain.sys.TSysUser"%>
<%@page import="com.mmy.domain.constzone.TConstZone"%>
<%@page import="com.mmy.domain.line.TLineBase"%>
<%@page import="com.mmy.domain.sys.TSysOrg"%>
<%@page import="com.mmy.domain.line.TLinePlace"%>
<%@page import="com.mmy.domain.line.TLineTrip"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<% TSysUser tSysUser = (TSysUser) session.getAttribute("tSysUser");%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/WEB-INF/jsp/includeb.jsp"></jsp:include>
<script src="js/vue/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue/eleme.js"></script>
<link rel="stylesheet" type="text/css" href="css/eleme.css"/>
<title>出团</title>
</head>
<style>
	.el-input{
		width:225px;
	}
	.box{
		border:1px solid #cccccc;
		border-radius: 4px;
		padding-top: 1rem;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	.area{
		width: 1000px;
	}
	.switch{
		padding-left: 20px;
	}
</style>
<body>
<div id="off-canvas-container" class="off-canvas-container">
	
		<jsp:include page="/WEB-INF/jsp/BackHeader.jsp"></jsp:include>
		<main class="at-padding-large-bottom">
		<article>
		<header class="bg-light at-padding-large-top at-padding-large-bottom at-margin-large-bottom">
		<div class="page-header container">
			<div class="row">
				<div class="span-5 col">
					<h3>出团</h3>
				</div>
			</div>
		</div>
		</header> 
		<div id="app">
			<section class="container">
			<div class="information">
				<h4 class="info-h4">
					<i class="fa fa-caret-right" aria-hidden="true"></i>出团通知
				</h4>
			</div>
			<input type="hidden" value="${planID}" id="planID">
			<input type="hidden" value="${lineID}" id="lineID">
			<input type="hidden" value="${date}" id="date">
			<el-form :model="ff" ref="ff" :inline="true" label-width="108px">
				<el-form-item label="送机人" prop="cDeliver" :rules="{required: true, message:'请输入送机人姓名',trigger: 'blur'}">
					<el-input v-model="ff.cDeliver"></el-input>
				</el-form-item>
				<el-form-item label="送机人电话" prop="cDeliverTel" :rules="{required: true, message:'请输入送机人电话',trigger: 'blur'}">
					<el-input v-model="ff.cDeliverTel"></el-input>
				</el-form-item>
				<el-form-item label="集合地点" prop="cPlaceID" :rules="{required: true, message: '请选择集合地点',trigger: 'change'}">
					<el-select v-model="ff.cPlaceID" filterable placeholder="请选择">
						<el-option v-for="place in places" :key="place.id" :label="place.name" :value="place.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="集合时间" prop="cTime" :rules="{required: true, message:'请输入集合时间',trigger: 'blur'}">
					<el-input v-model="ff.cTime"></el-input>
				</el-form-item>
				<el-form-item label="集合标识" prop="cSign" :rules="{required: true, message:'请输入集合标识',trigger: 'blur'}">
					<el-input v-model="ff.cSign"></el-input>
				</el-form-item>
				<el-form-item label="出发航班" prop="iPlaneOutPlanID" :rules="{required: true, message: '请选择航班',trigger: 'change'}">
					<el-select v-model="ff.iPlaneOutPlanID" filterable placeholder="请选择">
						<el-option v-for="plane in planes" :key="plane.id" :label="plane.name" :value="plane.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="回程航班" prop="iPlaneIntPlanID" :rules="{required: true, message: '请选择航班',trigger: 'change'}">
					<el-select v-model="ff.iPlaneIntPlanID" filterable placeholder="请选择">
						<el-option v-for="plane in planes" :key="plane.id" :label="plane.name" :value="plane.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="接机牌" prop="cPickUp" :rules="{required: true, message:'请输入接机牌',trigger: 'blur'}">
					<el-input v-model="ff.cPickUp"></el-input>
				</el-form-item>
				<el-form-item label="接机电话" prop="cPickUpTel" :rules="{required: true, message:'请输入接机电话',trigger: 'blur'}">
					<el-input v-model="ff.cPickUpTel"></el-input>
				</el-form-item>
				<el-form-item label="通知文档" ref="uploadElement" prop="doc" :rules="{required: true, message:'请上传通知文件',trigger: 'change'}">
					<el-input v-model="ff.doc" v-if="false" ></el-input>
					<el-upload
						class="upload-demo"
						ref="upload"
						action="https://jsonplaceholder.typicode.com/posts/"
						:on-change="handleChange"
						:on-remove="handleRemove"
						:auto-upload="false"
						:limit="1">
						<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
						<div slot="tip" class="el-upload__tip">只能上传doc/docx文件</div>
					</el-upload>
				</el-form-item>
			</el-form>

			<center>
				<el-button type="primary" @click="submit('ff')">提交</el-button>
				<el-button @click="resetForm('ff')" type="warning">清空</el-button>
			</center>

	</div><!-- container -->
	</div><!-- app -->
	</section>
	</article>
	</main>
	<jsp:include page="/WEB-INF/jsp/Footer.jsp"></jsp:include>
</body>
<script>
	const vue = new Vue({
		el:"#app",
		data(){
			return{
				ff:{planID,lineID,date,
					iTeamID:'',iGuideID:'',cDeliver:'',cDeliverTel:'',
					cPlaceID:'',cTime:'',cSign:'',
					iPlaneOutPlanID:'',iPlaneIntPlanID:'',
					cPickUp:'',cPickUpTel:'',doc:''
				},
				fd:new FormData(),
				places:[{
					name:"沈阳",
					id:1001
				}],
				planes:[{
					name:'阿飞',
					id:5005
				}]
			}
		},
		created(){
			this.ff.planID = document.getElementById("planID");
			this.ff.lineID = document.getElementById("lineID");
			//日期格式  yyyyMMdd
			this.ff.date = document.getElementById("date");
		},
		methods:{
			submit(formName) {
				let vm = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						vm.fd.append('iTeamID',vm.ff.iTeamID);
						vm.fd.append('iGuideID',vm.ff.iGuideID);
						vm.fd.append('cDeliver',vm.ff.cDeliver);
						vm.fd.append('cDeliverTel',vm.ff.cDeliverTel);
						vm.fd.append('cPlaceID',vm.ff.cPlaceID);
						vm.fd.append('cTime',vm.ff.cTime);
						vm.fd.append('cSign',vm.ff.cSign);
						vm.fd.append('iPlaneOutPlanID',vm.ff.iPlaneOutPlanID);
						vm.fd.append('iPlaneIntPlanID',vm.ff.iPlaneIntPlanID);
						vm.fd.append('cPickUp',vm.ff.cPickUp);
						vm.fd.append('cPickUpTel',vm.ff.cPickUpTel);
						// axios.post('testpost',vm.fd)
						// .then(response => (console.log(response.data)))
						// .catch(error => console.log(error));
						console.log(vm.fd);
						this.$message.success('已提交');
					} else {
						this.$message.error('请根据提示正确填写！');
						return false;
					}
				});
			},
			handleChange(file,fileList){
                this.ff.doc = URL.createObjectURL(file.raw)
            },
			handleRemove(file, fileList) {
				console.log(file, fileList);
				this.ff.doc = ""
			},
			beforeUpload(file){
                this.fd.append('file',file)
                return false
            },
			resetForm(formName){
                this.$refs[formName].resetFields()
                
            }
		}

	});
</script>
</html>

